<template>
  <view class="noContentBg" v-if="showFlag">
    <view class="noContentImgBox modelclass" :style="{ top: imgTop }">
      <image :src="imgUrl" class="noContentImg"></image>
      <view class="hintNoAppliance">
        <text>{{ $t(content || '') }}</text>
      </view>
    </view>
    <slot></slot>
  </view>
</template>
<script setup lang="ts">
import netconfig from '@/config/netconfig'

const props = defineProps<{
  showFlag: boolean
  content?: string
  imageName?: string
  imgTop?: string
}>()

const imgUrl = computed(() => netconfig.ASSETSPRE_ICONS + props.imageName)
</script>
<style lang="less">
.noContentBg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  .hintNoAppliance {
    position: relative;
    top: 0;
    margin-top: 20rpx;
    width: 100%;
  }

  .noContentImgBox {
    position: absolute;
    top: 34%;
    left: 50%;
    width: 550rpx;
    height: 428rpx;
    transform: translate(-50%, -50%);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    color: #656b7b;
    letter-spacing: -0.34px;
    text-align: center;
  }

  .noContentImg {
    width: 550rpx;
    height: 428rpx;
  }
}
</style>
